Explaining Grid System

Trucking is based on Bootstrap 1170 Grid System.

So what you need to know about using this grid system? First of all, every column, or page section must have it's container. That is div with class "container". Inside of it there must be div or section with class "row". Inside one row, you put your columns. One row is actually one row visually. That means that column with class .col-md-12 will go inside one row. In row below that column can be another row that is containing for example .col-md-4 and col-md-8.
How do you combine columns? As there are 12 columns, sum of it's classes numbers must be 12. That is, in one row can go col-md-7 and col-md-5, or col-md-3 and col-md-9, and so on. Important thing to remember is that inside one row can go columns which sum is 12. Every row has it's bottom margin, which is 70px. So it is important to remember that one row is including only one visual row of columns. You can also use nested columns. For example you can have col-md-9 (like on the page with sidebar) and inside of it you can place a row that containes two col-md-6 columns. That columns inside will be half wide of it's parent column.

Inside of these columns you can put your content.

Explaining animations on elements on mouse scroll

As you could see in earlier section about explaining grid system, template is built of columns (grids). Our suggestion is to place content inside grid, that means, make a div with class of a grid you want, and then inside of it put paragraphs, services boxes and similar.
Regarding animations, you can use them on a single element, or you can wrap elements in a grid that will be animated. To use animated content, first you'll need some css and some js files. All available animations are placed inside animate.css file. Files you will need to include are include.js (main jQuery that needs to be included on every page),and scripts.js - all scripts that are needed on every page and animate.css file.

Let's see how the HTML structure of some animated grid that holds elements would look like:

In above example, all content that is inside div with classes "triggerAnimation" and "animated" will be animated in the same time. When you use animated element you need to use those classes. In field "data-animate", you define which animation will that element have. You can see all animations inside animate.css file. Other way of animating content would be to use those classes and data-animate field on single element, for example on h3, p or some other HTML tag.

How to make your site retina ready

To make your site retina ready there are couple of steps you need to follow. First of all you need to have two sizes of images. One is default size that will be displayed on standard screens, and second is double sized that will be displayed on retina screens. Those images needs to be placed in the same folder. Second, doubled sized image needs to have sufix "@2x". For example you have logo.png and logo@2x.png. Displaying doubled sized images on retina screens is made possible using retina script. It is placed inside scripts.js file. So you need to include that file on every HTML page.

When we speak of icons or images that are used as backgrounds, there also needs to be two sizes of them, but they won't be automatically replaced. You need to make retina queries in css, where you will define double sized icon and it's background size in css. We already made retina.css file that contains all icon and images backgrounds that template uses in double size, so you can see examples there. If you won't change icons that are in .png, or at least it's name, you don't have to change anything, you are ready to go.

So short story is: make two sizes of images and place them in the same folder. When you use images inside HTML, simply put them in "img" tags. You don't need to define it's width or anything, just include scripts.js file in your document. If you'll change icons or images used as backgrounds and want to have retina versions of them, also make two sizes. Open retina.css file and inside query for retina define background of element you want to have retina image and define it's background size. For example you have search.png which is 40px x 40px and logo@2x.png that is 80 x 80px. In retina css you will define that some div has background search@2x.png and it's background size iz 40px x 40px (size of original image). And that's it. If you want to know more here are some useful links: http://retinajs.com/ and http://css-tricks.com/snippets/css/retina-display-media-query/.

Choosing color style

Template colors are placed in separate css files. Inside it you can quickly change color to suit your brand needs. There are also some predefined colors so you can use them too. When you replace the color, simply include that css file in your HTML documents. You can also make replacement in default-color.css file as it is already included on all pages. There are color combinations css files and single color css files. Sou can use which ever is most suited for you. Note that svg icons - transportation and logistics icon we used in a template will automatically change their color when you place your color in css file. This is handled through small js script which is placed inside include.js file.

Customizing Header

First of all there are 7 header types. Let's first explain difference between them. First we have header that is almost on all pages - with gradient background and in front of an image. It is header type one. Than, we have this same header but it has some links on top - we called it top bar. So it uses the same structure and the same css but only have additional top-bar in HTML structure.

After that we have more simple header with top bar. That header type is called header-style02. It can have light top bar, dark top bar or can be fully dark. in each case the HTML structure is the same, there are only different additional classes for coloring.

Third header option is header with menu on the bottom. That is header-style03. it can be light and dark. Again the HTML structure is the same, it only has different classes for coloring. So before you start your customization, choose your header style and copy-paste it in your HTML document.

now let's see all HTML structures and how to customize the header.

So, let's see what we have here. First of all you need to make HTML structure like this. First thing we have is header-wrapper. You need to use these classes - "header-wrapper" and "header-transparent". it tells us which type of header it is and are used for sticky header animation. inside of it we have header with id "header" and class "header-style01" which holds the specific styles of this header type. inside of it we have a container which holds main-nav - main navigation of the site including logo, navigation and search button.

Navigation is divided into navbar-header which holds the logo and "navbar-collapse" which holds the navigation, responsive navigation and search button. Logo image is placed inside img folder, so you can make replacement there. If you change the name of your logo, then please update it in your HTML file also.

Other header types has very similar layout, as you can see in the HTML files. So the main thing to know is how to change the logo and how to make site navigation, so let's move onto main navigation customization.

customizing main navigation

As you can see in code below after the logo there is navigation along with responsive navigation (class dl-menu) and search button. So let's start with main navigation first. Keep HTML structure as shown in code below. For adding first level of a menu, make HTML structure as this:

To add second level menu item, simply add another unordered list inside this list item with class "dropdown-menu". The same goes for third level. Inside "href" enter the path to your file.

To point that this page is the page you are currently on, then add class current-menu-item to the list item which points to that page. Here is how it looks:

As you can see this is a current-menu-item and it has sub menu - second level menu.

responsive navigation

Main navigation will be invisible on smartphones. This is made inside responsive.css file. Instead of main navigation, responsive navigation will be visible. This is div with class dl-menu. So how to make responsive navigation? Make a div with id "dl-menu" and class "dl-menuwrapper". Inside of that place a button with class dl-trigger. This button will open up responsive menu on click. Then make unordered list with class "dl-menu". Inside of it place list items that has the same structure as in the main navigation. Only remove classes "curent-menu-item". When one menu list item has submenu, simply add class "submenu" to that "ul". You can see that in code above. So the only thing you need to remember is that responsive navigation must have the same inner structure as main navigation.
For responsive navigation to work, you must include jquery.dlmenu.js file in all of your files.

Home Pages Customization

customizing home page default file index.html

So first, we need to define which css files and js files are needed for home page to work like on preview. Let's start with default home page - file index.html.

Slider customization

As already mentioned this theme comes with Master slider. It is pretty easy to use and we included it's original documentation. So to accomplish the same look, or similar here is how it works.

First of all keep it's main structure the same. That is:

So this is the structure of the slider which has one slide inside. As you can see this div with class "ms-slide" is an actual slide. You can have as many div's like this as you need. Inside of a slide we first define what is the background image and the path to that image. All images for the slider are placed inside img/slider folder, so you can make replacement there. After that we have some layers. First we have h2 tag which has class "ms-layer". It says this is a layer and that layer has some options. First we say where is the position of that layer in the slider. Then we define what that layer is - is it text, image or video. Then we define animation of that layer, it's duration and hide animation. With data-delay option we define time in which the layer will be displayed after the slider loads. Now we say, we want to display that layer immediately. You could also say, show it after 300ms or something like that. Then you would write data-delay: "300". After all the option we place some text. The same is for all the other layers. You can learn more about possible animations from Master's slider official documentation which is, as we said before, included with this help file.

For Master slider to work, you must also include some js code at the bottom of the page. You can just go to the index.html file and simply copy-paste it.

Page content wrappers

So, page content, that means everything below the slider and above the footer is placed inside page-content div's. On first home page there are several div's with class "page-content". Open index.html file for easier understanding. First er have page content that has some background image, then we have a page-content, then we have dark blue, then again white and so on. We already explained the grid and that every column must be placed inside a row, which is a child of a container which is then a child of a page-content.

As you can see in the home page - index.html file page-content also have some other classes. Let's see what that classes means. First of all we have a class "parallax" and "parallax01" classes. First class is used for the positioning the image background. Image will be static and content will be in motion when you scroll the page. Other class defines which image is used for that background. You can change this class to anything you like, but then open style.css file and make a replacement there too. This section also has class mb-70. That means that this section with background will have margin-bottom of 70px so the next content will be nicely detached. Every time you have a page-content that has a parallax image or custom color background and after that standard page content with white background, add class mb-70 to page content that has that background. You can also see this in all HTML files.

After that we have a div that only has class "page-content". That means this part of the page will be transparent.

Next we have is a page-content that has a lot of additional classes. Let's see what they all mean. First we have class "custom-bkg", which defines that this page content will have some custom colored background. Than we have class "bkg-dark-blue" which say that this section will have dark blue background. You can choose any color background you would like, just change the value in the style.css file. After that we have "column-img-bkg" which defines that this section will have column that has full background image and is empty. We use this class in js code so if you want to have section with column that is empty but has an image background, this is the way. And finaly we have a class mb-70, which say we have a white page-content after and we need bottom margin of 70px after our custom-background page-content.

After that there is another white page content.

Last we have on this homepage is the custom background page-content which is light grey. So it has classes "custom-bkg" and "bkg-light-grey". After that there is a footer so there is no need to place mb-70 class.

Further, every page content as previously explained has containers inside, which can be just container - 1170px or container-fluid which is full width. You can choose any you'd like. Inside container there is a a row inside which you place your real content, your columns.

Now when we understand the grid, page-content and containers, let's move on the homepages elements to see how they work and what are their options.

Services - Feature box

So first thing we have on the homepage are services with image that is animated on hover. The class used for this element is "service-feature-box". As you can see those services are a bit overlapping with the slider. To make that, simply add class "services-negative-top" to the row that contains them and it will push them up. Service boxes are placed in col-md-4 but you can use any column you like. Images used are placed inside img/pics folder so you can make replacement there. Also if you change the image name, change the path to the image inside "src" tags. Here is the HTML structure for this service box.

Also you can see that this column has two classes: col-md-4 and col-sm-4. This means that we want that this column stays the same size on first responsive point. You can combine that classes in the same way as you do with the main column class, which means in one row, sum of it's numbers must be 12.

Custom headings

As you can see on all of the pages, there are two types of headings. One with little border on top, that is left aligned and one with bottom border that is centered. You can see it's HTML structure in any of the pages and can edit them inside style.css file.

Services in boxes with icons on the left

As you can see in your index.html file, next thing we have are services that are placed in boxes and have icons on the left. HTML structure is really simple, so we'll head on the icons used. As you can see in your code, icon is placed inside "icon-container", it's an svg that is placed inside img tags. All icons are placed inside img/svg folder and you can choose any of them. Those icons come in two color - grey base and highlight color that responds to template color. You can change this color in color-default.css file. At the end of the file you will see ".icon-container .st1" part. That "st1" is a path that is colored. To change base color of the icon change .st0 part. Also, you don't need to use two colored icons. You can use FOnt Awesome here or some of the pi-transport icons that are in one color. To use them simply make "i" tags and add class to that "i" tag that responds the class of the icon you'd like to use. HTML code is presented below, for easier understanding.

Page content with image background on column

Next thing we have is page content that has two columns, where one contains some list with icons and the other one is empty but has background image. We already explained the part of creating this type of page content in section above called "page wrappers". But let's point some important things. Page content must have class "column-img-bkg" and has class "dark", because it also has dark blue background and we want for our content to be visible, so all the headings and p tags and so on, will be white. COlumn that has background image will have the class that defines which image will be used for that background. Important thing to remember that you must leave class "img-bkg*", where "*" is the number of the image used. You can use any number or word, just leave the beginning of the word as it is, as it is used in jQuery for calculating height of the column.

Then we have one column that has offset and contains service list with icons. As icons we used are svg and are two colored, where base color is grey, we need them to be white (as we have it on the dark background). So when using two colored icons on the dark background, simply add "svg-white" to the img tag that contains that svg icon and they will become two colored with white base. You can use this type of services in any column you like.

Latest posts v1

Next thing we have on the homepage is the latest posts element. It is a simple unordered list with class "pi-latest-posts", where every list item is one blog post. To customize it, first thing to do is to copy/paste the structure. Image is placed inside img/blog folder so you can change it there. Also don't forget to change the path to the image if you changed it's directory or name. Here is the HTML structure of one blog post element.

As you can see heading of the post is also a link to news-single.html file. That is the file that presents the blog single page. So, when you make blog single page for every post, you need to change that "href" attribute on every post element.

Testimonial carousel

Next thing we have is a small testimonial carousel. You can place it in any column you like. For carousel we used owl-carousel script which you must then include in your file, same as the owl-carousel css file. Let's see it's structure:

So first thing we have is a carousel container. It is holding all the items. After that there is a div with id "testimonial-carousel". We used that id at the bottom of the page, to call the carousel script. After that we have mandatory class "owl-carousel" and class "owl-navigation". Using this class we define that the carousel will have navigational arrows. You can also use dots navigation, in which case you would use class "owl-dots" instead of the class "owl-navigation". Inside there are little divs with class "owl-item". One owl-item is one item in the carousel. You can place your testimonial elements inside and have as many owl-items as you need. The latest thing we need it to call the owl-carousel plugin at the bottom of the page inside script tags like this:

So what this all means. First of all we have attribute "items". here you say how many items you want to show at once. After that there is "loop" with value "true". It means we want carousel to scroll infinite. If you don't want that, just change true to false. "margin" says that we want 30px margin between carousel items. "responsiveClass" is weather you want your carousel to be responsive or not. "mouseDrag" means that we want carousel to work on mouse drag. "dots" are the type of navigation, as explained above. So if you would like to use dots navigation here is the place to do that. Simply change false to true. "autoheight" means that we will have different items of different height, so we want carousel to adjust to it's height. After that we have responsive part. those numbers define on which breakpoints carousel changes it's layout and options. As you can see there is from 0 to 600 and 600 to 1000px. You can change it in any way you'd like.

Client carousel

Last thing we have on the homepage is client carousel. The principle is the same as for the testimonial carousel, only we have 6 items here that are shown at once. Images are placed inside img/pics folder, so you can make change there.

CUSTOMIZING HOME PAGE 02 - TRUCKING SERVICES OVERVIEW - FILE INDEX02.HTML

On home page 02 we have the same slider as on home page 01. So to customize the slider please read section Slider customization.

LIST WITH ICONS

On this homepage we have some specific elements. First there is a list with arrow icons. You can use any of the font Awesome icons in this list. So what's important to know about this? First of ul that holds list items must have class "fa-ul". Inside of it there are list items. Inside a list item on the first place is icon in "i" tags. It must have classes "fa" and "fa-li" and a class that defines which icon would you like to use.

TRACK YOUR LOAD FORM

Next thing we have is simple track your load form. It is not functional as it requires some CMS or some web application behind it. We just offered design for it in this HTML template.

Services gallery

Here we have interesting full with services gallery. So how to make it. First of all we will have page-content. Inside of it we will have container-fluid, as the gallery goes full width. Then we have a row. Inside that row we first have unordered list with mandatory class "services-gallery". Inside of it every service item is placed inside one "col-md-3". Images for this services are placed in img/pics folder, but you can place theme anywhere you like and after just change path to that image in your HTML file. So just keep the structure the same. If you'd like to change anything just go to style.css file and look for "Services gallery".

Latest posts v2

Next thing we have are latest posts, design version 2. As you may see, this type of latest posts have date on the left instead of the image (as it is on latest posts 01). It's structure is really simple, as you can see in your inde02.html file. So first you have one unordered list with class "pi-latest-posts02". Inside of it, every list item is one blog post. Every blog post has a div with post-date and post-details. As you can see, title of the blog post is also a link to news-single page. So you need to insert a link to a single post inside those "a" tags. Styling for this type of blog post is placed inside style.css file. You can also use it in smaller columns.

CUSTOMIZING HOME PAGE 03 - TRUCKING VIDEO SLIDER - FILE INDEX03.HTML

Tabs content

After the slider that has already been explained, there are tabs content. So how tabs work? They are currently placed in col-md-8 but you can place them in any column you want. First we have one unordered list with class "tabs". Inside there are list items. EVery list item is one heading in the tab and has a link with id that points to content with the same id. So tab with id "tab2" will open content with id "tab2". First tab has class "active", which means that content is open. After that ul, there is a div with class "tab-content-wrap". Inside of it there is are div's with content. Every div has the id that corresponds to specific tab heading and class "tab-content". We need those classes for styling and proper functionality of tabs. So first div inside tab-content will have id "tab1", the same id that first list item - tab heading is pointing to. Second will have "tab2", and so on. You can name your div's differently if you like. Just don't forget to link them with tab headings. For tabs to work you need to include include.js file in your HTML page. Styling of the tabs is placed inside style.css file, and active tab color is placed in color-default.css file, so when you change the template color, active tab color will also change. Inside div with class "tab-content" you can place your content. It can be text, image, list or something else.

TEAM MEMEBRS

Next thing we have that hasn't been explained are team members. Every team member is placed inside one col-md-4 column, but you can place them in any column you like. It's structure is simple. We have a div with class "team-member". That class is used for styling in style.css file. Inside of it we have an image. Images are placed inside img/pics folder. After the image, there is a div with class "team-details" which is holding team member name and it's position in the company. Class "team-details" and classes inside are also used for styling. As you can see this column that holds team members has two classes. As previously explained in section understanding the grid, first class "col-md-4" says that we want that it has a width of 1/4 column on resolution 1200px above (according to bootstrap grid), but also we want to keep that with on medium resolutions also (> or equal 768px to 1200px). If you'd like a different styling of this column you can play a little bit with classes. You can also read more about combining the classes on official bootstrap page, section "The grid".

PROMO BOX

Next thing we have on the homepage is promo-box. It's a simple div that has an image background, some text and a button. It has a specific padding, which you can adjust in style.css file, depending on the image type you use.

CUSTOMIZING HOME PAGE 04 - file index04.html

quick quote form

On third hompeage we have some list with icons, which is already explained in previous section, some image and text and quote form, which we will pay more attention now. You can first read, if you skipped it, the section about explaining PHP code. So this form requires some PHP code to work. The data users inserts into this form will be sent to your email. So how to customize this form? We have a form with class "wpcf7" and "shipping-quote". Inside of it we have fieldsets. Inside of every fieldset there is a label and input field. Every input field has an id which is used in the AJAX code which makes possible for form to work. So if you have more inputs then we presented, add a unique id to every one of them as we'll need them in making the AJAX code. Now you can reffer to section explaining PHP code to see how to add more inputs, make AJAX code and customize contact.php file.

LIST WITH LARGE ICONS

Next thing we have is a list with icons on the left, some heading and description. So, this is an unordered list with classes "fa-ul" and "large-icons". First class tells us we are using Font awesome font and that class is mandatory. Second class is used for styling this type of list. Styling is placed inside style.css file so you can make any adjustments you need there. Further, inside that ul, there are list items. Every list item has icon-container, which holds the icon. You can use any fontawesome icon inside. As you can see that icon-container has classes animated and triggerAnimation and data-animate filed with some value. This means we want this icon to be animated so we use those classes and in data-animate filed we say which animation we would like. You can see all animations available in animate.css file. After icon-container there is a div with class "li-content". Inside of it there is a heading and text. You can change your text there. You can also place this type of list in any column you like.

SERVICES WITH CENTERED ICONS - BOXED

As you can see in the homepage, next thing we have is services icons with icon on the center and some background. The class for this services is "service-icon-center-boxed". So, you can make a div with that class. Insie of it we have a div with class "service-title". This div holds heading and icon-container. Inside icon-container you can place your icon. Important to note is that you can use any svg icon that will be in two color, from img/svg folder, or you can use one color icon from pi-transport icon font, or maybe fontawesome font. If you'd like to use font icon from any of these two fonts, first please insert the path to that font css styling in the head of your document. Then instead of img tag make an "i" tag. For using font awesome add classes "fa" and "fa-name of the icon" to that "i" tag. If you are using "pi-transport" font simply add class that is the name of the icon to "i" tag. You can then color those icons in any way you'd like through style.css file. It's default color will be #777.

STATEMENT ELEMENT

Net we have on the homepage is a statement which is placed on an image background. So this works in the following way. First we make a div with class "page-content", "parallax" and "parallax-image-number" and class "dark". Class dark means that the image we use as a background is dark and we need to have the white text. So that's why. Third class "parallax03" is used for defining image background. You can use any class you'd like here, but then please open your style.css file, find that class inside and change it to what you inserted in html. Images for backgrounds are placed inside img/pics folder.
As you can see statement element is really simple. It only has p tag which is a bit bigger than the rest of the text on the site. You can make any customization you need in style.css file.

CUSTOMIZING HOME PAGE 05 - TRUCKING SERVICES SLIDER - file index05.html

SERVICES SLIDER

So what we have here that is different is a bit different slider. We also used master slider for this, just with a bit different layout. So we have more slides inside of it. Every image is one slide, and there are many displayed on the first glance. So to understand how the slider work please refer to section slider customization section. The difference between slider on first home page and this one is the js code at the bottom of the HTML code that calls the slider. So, here we have width: 480, which means that we want that one slide has 480px width; height: 855, which means we want the slide to have 855px height. You can change those values to any you'd like, but then also make images in the same size. Further this slider layout value is partialview. It has space of 2px - margin between the slides. You can increase or decrease it as you need. So that's about it. Styling of elements used in the slider is placed in style.css file.

CLIENTS LIST

After the slider we have some grid with client logo images. It's a simple unordered list with class "clients-li">. Inside of it, every list item contains one image, that represents client logo image. Images are placed inside img/pics folder so you can make replacement there. Styling is placed inside style.css file so you can make any design adjustments there is needed.

Services feature box

Services feature box has already been explained here so please take a look if needed.

latest posts v3

Next thing we have is latest posts version 3. The HTML structure is pretty similar as for the previous ones. Styling is placed inside style.css file. note that you can use this element in smaller columns also. Heading of the blog post is also a link that points to news single page. So don't forget to link your news single pages with the link in the heading.

Testimonial carousel

Testimonial carousel has already been explained here so please take a look if needed.

Interactive locations map

The last thing we have on the homepage is the interactive locations map. We used master slider for this. So we inserted image background with a map, that is slider background and used little highlights to point specific locations. You can do that the same way you are doing with inserting the layers in the slider. You can see slider customization section to see how to insert a layer, if you skipped it. After inserting a hotspot, define on which x and y coordinate you want to point it. Images used in little pop-ups are placed in img folder. Just remember to make the same HTML structure. Also as you can see in the HTML file, you need to call the slider at the bottom of the file inside script tags.

CUSTOMIZATION OF HOMEPAGE 06 - TRUCKING PARALLAX SLIDER - file index06.html

parallax slider

For this slider we also used master slider plugin, so the customization is the same as for the other slider types. You can refer to slider customization section for learning on inserting the layers and images. You can also find more information in official slider documentation.

Note

Next thing we have is a note. As you can see it is placed on page content that has some background image. You can use this element on normal white background if you'd like. The note element is simple, it is placed in a div with class "call-to-action" and has a div with class "text" and a "a" tag which has class "btn" and "btn-big". Those classes are used for styling. You can also use btn-small for smaller button and btn-medium for medium size button. Styling is placed inside style.css file. Button color is blue, as default template color is blue.

Other page elments has already been explained: services feature box, latest posts verion 2 and client carousel.

CUSTOMIZING HOMEPAGE 07 - FILE index07.html

vehicle gallery

First specific elemnt we have here is vehicle gallery. It is full width, which means it is placed inside "container-fluid". You can also use it in a grid. Images of vehicles are placed inside img/pics folder. So what you need to know about this? First, keep the structure as it is. So we have list items with class "col-md-3". This is one vehicle gallery item. Inside of it we have img tag, inside which is an image that will be displayed, figcation that is holding the heading and a div with class "hover-mask-container". That div holds the hidden zoom icon and is calling a lightbox. Inside that div we have a div with class "hover-zoom" and "a" tag inside of it, which is calling the same image. Here you should place the bigger image - full width image of your vehicle. You can place it in the same folder as the original image or maybe in another folder. Just don't forget to replace the path to full width image inside those "a" tags. For lightbox to work we used magnific popup plugin. Code for it is placed inside portfolio.js file so you'll need to include it in your files. Styling for the vehicle gallery is placed inside style.css file so you can make any adjustments you need there.

Accordion element

Next thing we have is an accordion element. How that works? First of all you can place it in any column you like. It's a div with class "accordion". Inside of it first div we have is div with class "title" and class "active". this is first accordion element heading. It has class "active", which means this content will be opened. After that we have div with class content. This is the content which is displayed by clicking on the title above. As first title i s active, this content will be shown. After that we have another title, than another content which will be displayed by clicking on that other title and so on. So first comes the title, than the content. Inside of the accordion content you can place your text, image and other elements. Styling for the accordion is placed inside style.css file so you can make any replacement you need there.

numbers counter element

Next thing we have are numbers counters. Every number that is animated is placed inside one column, so you can put them in any column you'd like. You need to use HTML structure presented in home07.html file to accomplish the same look. So let's see how to customize it. First you can edit the text displayed inside "p" tags. Number that will be animated is inserted inside "data-to" attribute. There you say that you want that number to be animated form 0 to something. Also you need to write that same number inside span tags so it can be displayed. "data-speed" attribute tells how fast you want your animation to be. It is displayed in ms. Finally there is some js code that needs to be placed on the page. You can see it at the bottom of the html file inside script tags.

CUSTOMIZING HOMEPAGE 08 - TRUCKING CORPORATE - FILE index08.html

We already explained all the lements used on this homepage in the previous section: slider customization, note, list with icons, promo box, list with large icons, latest posts v3, Quick quote form, statement element, client-carousel.

CUSTOMIZING HOMEPAGE 09 - TRUCKING SIMPLE SLIDER - file index09.html

So the only difference here is the slider which is not full width. The slider customization is the same as before, the only difference is in attribute "layout" at the bottom of the file inside script tags where we call the slider. The value is "fixed" instead of "fullwidth". To see how to insert layers into slider please go to slider customization section.

CUSTOMIZING HOMEPAGE 10 - FULLSCREEN MINIMAL - file index10.html

So this layout is pretty specific. It is full screen, so first we have fullscreen slider - master slider which is already explained before. Then we have page-content with classes "fixed" and "centered". Those classes are used for styling. We want the content to be in the middle of the page, and we accomplish it with those classes. Inside of it we have three columns which has some transparent background and some content inside. You can place any content inside those columns. This is just an example. Classes transparent01, 02 and 03 say how transparent will the background be. You can adjust this as the color background inside style.css file. At the bottom of the page there is news carousel section which is fixed to the bottom. For news carousel we used owl-carousel, the same carousel we used for clients carousel and testimonial carousel. So every owl-item is one news item. This page also include some js code which is placed at the bottom of the index10.html file inside script tags, so make sure you copy/paste it.

Choosing page title style

There are two page title styles you can use in your files. You can see second page-title option on simple-page-title.html page. As you can see, first one is made for first header type, and the second one is simple and is made for other header types.

So first page title is used on almost all of the pages. So it's a div with class "page-title-style01", which defines it's styling in style.css file, class "page-title-negative-top" that positions it behind the header and class " pt-bkg01" which defines which image is used for the background. You can change the image inside img/pics/folder. Inside of that div we have one full column which contains heading (h1 tags) which is good for SEO and breadcrumb-container. You can adjust breadcrumbs to lead to your pages inside "a" tags. If you'd like to change it's style, you can do that inside style.css file.

Second page title option can be seen on simple-page-title.html file and is suitable for other header types. this page title has only two classes: "page-title-style02" and "pt-bkg02", which defines what image will be used. Everything else is the same as on the page-title 1. You don't need to use an image for page-title. You can also use a background. You can define that in style.css file where you'll find styling for both page titles.

About Pages Customization

So let' start from about us default page.

ABOUT US PAGE STYLE 01

As you can see this page is made with sections that have custom background which is light grey and empty columns that has image backgrounds. Inside other columns we have regular text and lists. We also already seen those column backgrounds on idex01.html file so you can refer to it to see how to make a structure like that.

ABOUT COMPACT

As you can see this page is pretty simple to. We have some colored sections with text. service boxes, lists and images. So what we haven't seen till now are new services. It's HTML structure is simple. We have some icons that are placed in icon-container div. We used fontawesome, but you can use pi-transport font also. To use it simply change the class inside "i" tags to any class name from pi-transport font that suits you. On this page we also have team-member elements. We also used it on homepage so you can see how to customize it here. We also have promo box which has also already been explained before. At the bottom there is note element. Every of this elements has already been explained in previous sections so you can see how to use it and customize it. All elements fits to all columns so you can use them in any column you'd like.

about with sidebar

So here we have a page with sidebar. How that works? You can have left or right sidebar. If you have a left sidebar like it is on about page with sidebar, you will first make an "aside" grid that will be col-md-3 and one big grid col-md-9 in which you will place your content. If you like to have right sidebar, then first make col-md-9 and after that place and aside div with col-md-3.

As you can see on this page we have some elements in sidebar. All elements in sidebar are placed inside ul with class "aside-widgets". This class is used for some general styling of widgets. One widget is one elements in the sidebar. Also every widget has a div with class title in which you place a heading for that widget. First widget we have is a menu widget. Every widget has a class "widget" and class which describes it's type. Those classes are used for styling of that widget. menu widget is a simple unordered list where every list item is one menu item that points to specific page.

Next widget we have is a brochure widget. We have an image and some "a" tags that points to pdf document. You can edit that link inside "a" tags.

Speaking of pgae content inside col-md-9, there are images, text, list with cons, all elements that are previously explained. What is important to point out is that we have nested columns on this page. So how that works? FIrst of all we have a parent column col-md-9. Inside of it we want to make two half width columns for example. Then we will make a div with class "row". inside of that row we will place two col-md-6, the same way as we work with normal columns.

Last thing er have are team memebers. it's structure is almost the same as for previous team members element, only this one has also some description. You can change the images inside img/pics folder and all the styling in style.css file.

COMPANY HISTORY PAGE

As you can see, on this page we first have some simple slider. We used nivo slider for this, so you'll need to include css file and js file of nivo slider in your page. You can see this is company-history.html file. You can place the slider in any column you'd like. So how to customize it? First of all use HTML structure from the example file company-history.html. As you can see this slider has the id "slider-1". this id is used for calling the slider script. You can have more than one slider in your page, they just need to have a different id and you need to call every one of them at the bottom of the page inside "script tags". Let's go further. Slider contains img tags. Images are placed inside img/pics folder so you can make replacement there. Also those img tags have some title attribute with an id. This means that we want every image to have some title and id tells us which title will be displayed. So below the slider images, we make a div with id that corresponds to image rag id and inside we place title for that slide. You can have as many titles and as many slides you want. For nivo slider to work, we must call it at the end of the HTML file as we previously explained. You can see that in company-history.html file.

Next thing we have is a timeline. Timeline is an unordered list with class "company-timeline". every list item inside presents one year. Every list item has icon-container div that holds calendar icon. We used font awesome here. After the icon there is "timeline-item-details" that is holding heading and text. You can also insert an image in that description. Styling for timeline is placed in style.css file. You can also use timelin in any other column you like.

COMPANY EVENTS PAGE

As you can see on this page there is a nivo slider, which we already explained in previous section. After that we have a table with events. This table has class "table-responsive", which means that it will have a little scroll on smaller devices and all elements will be visible. So to make an events table just make HTML structure as in example file. You can remove some columns if you like, just keep the classes used in the table the same, to get the look as on the preview.

company clients page

On this page we have grid with clients logos. As you probably noted in previous section we already explained this element. It's a simple unordered list where every list item holds an image of one client. Also we have a client carousel which has also been explained before.

careers page

What we have specific on a careers page is an accordion. We already explained accordion element before, so let's see what's specific about this one. The only thing that is different from classic accordion is that this one has a title that is separated in three spans. You can place this type of title, or simply use one heading. You can insert any type of the content inside, just keep the main structure the same and the classes that we used, as they are used for the styling. You can adjust all settings in style.css file.

online driver application

On this page we have a contact form. Data inserted in this form by user will be sent to your email which you inserted in contact.php file. To see how to customize this form please refer to section about PHP code explanation as we already explained adding input fields to the form there. Also this form has some specific styling, so you should leave the structure and classes the same. If you need to customize the look of the form go to style.css file.

Services Page Customization

As you can see in the preview, there are two types of services pages. Width sidebar and full width. All elements present on those pages had already been explained in previous sections. How to use page with sidebar is already explained here. The only element that we haven't explained yet can be seen on logistsics services pages like air-freight.html. As you can see at the bottom of the page there are some simple services boxes with icons and a heading. We used svg from img/svg folder for icons. As you can see, those icons are in two color. This color is placed in default-color.css file (.icon-container .st1 classes). You can also use pi-transport font instead of this svg icons. To use it, make "i" tag inside icon-container and add class to it, that represents the icon you want to use. You can see all available icons in icon-fonts/pi-transport folder. Also, you can use FOntawesome icons there. To use font-awesome icon, simply make an "i" tag with class "fa" and class that represents the icon you would like to use.

Also as you can see on packaging-options.html page, we used a simple table for displaying packaging options. If you'd like to style that table differently, you can go to style.css file and do all of the customization there.

Full width and pages with sidebar

Full width page is a simple page where all of it's content is placed inside col-md-12 (full width column). You can put any type of content you like inside. On the other hand there are pages with left and right sidebar. Logic of page with right sidebar is that it is divided in col-md-9 and then col-md-3 with class "aside-right". Page with left sidebar has aside with class "aside-left" at the top and below is actual content put in col-md-3. You can also put any content you'd like on those pages.

Vehicle gallery pages

Vehicle gallery has already been explained here so you can go there to see how it works. Here we have two pages with vehicle gallery. Gallery element is the same for both of them. Only difference is that the full gallery is placed inside page content, container-fluid and gallery grid is placed inside normal container. Images for vehicle gallery items is placed inside img/pics folder.

Portfolio full layout has only one difference and that is - it's placed in container-full. You can edit portfolio layouts style in style.css file. To make more portfolio pages and then link them, make another html file the same as default one. Go to pagination section, as you can see in the code above and insert path to second portfolio html file. Where is number three, insert path to your third portfolio html file and so on.

News list and Standard Pages Customizations

So there are three main blog pages design. First is news list, that has no image, then news standard with image and news masonry. Every layout is very similar. News masonry is full width and it has no sidebar. Content is divided in col-md-9 (blog posts) and col-md-3 (sidebar). Left sidebar will have class "aside-left" and will be on top in HTML file. Right sidebar will have class "aside-right" and will come after blog posts.

News list and news standard layout has almost the same HTML structure. Both of them are placed inside col-md-9 with class "blog-posts". News list has also a class "post-list". It is used for the styling. Every post is one list item with class "blog-post". It's the same for both layouts.

inside that list item there is div with class post-date, inside which we placed the date. After that there is post body, which holds the heading which is also a link to news-single page, some short text and a read-more button. After replacing the heading, don't forget to also replace the "a" tag with actual reference to your HTML document.The only difference between news list and news standard layout is that news standard layout also has an image or slider. Both of them are placed in div with class "post-media". For slider on the blog we used nivo slider, wich has already been explained. All images used in blog are placed inside img/blog folder.

Pagination

At the bottom of the page there is pagination. Note that for every page you'll need to make one HTML page as described above. Pagination is simple unordered list, where every list item is one page.

Blog Masonry Pages Customization

HTML structure is very similar to standard news pages. So to use this type of news here's what you need to know. First of all use prepared HTML structure. You can replace image in img/blog folder. Heading on post is also a link to post single page, so don't forget to change it. All posts are placed inside unordered list which has class "istope" and "masonry". These classes are used for js code and styling. Every post is one list item, as before only it has additional class "isotope-item". You can put any number of post items you like in that unordered list. Customizing is the same. For news masonry layout to work you need to call masonry plugin at the bottom of the body of your HTML page. Also you need to include isotope jQuery library in your HTML page. Code for calling masonry posts is presented below:

Also you can see that this news layout has a "like" option on the posts. This is accomplished with "sharre" jquery plugin which also needs to be included in your page. So how to work with this plugin? Plugin can only sharre the whole page. So as you can see, inside a post there is li with class "post-like" and there is some link inside. You can change that link to your news single page. You can do the same for every post. For this to work, you need to call the script at the bottom of your file like this:

".post-like" in this code is the class used on the div in HTML and also used for styling, so make sure you don't change that in your HTML code. You can customize it's css in style.css file, just look for "post-like" class.

NEWS SINGLE PAGE CUSTOMIZATION

So here is the final news page and that is news single. It's HTML structure regarding the post info and post body is the same as on the other news pages.

Next, what we have on this page is comments section and form for sending a comment. When user sends a comment it will be send to your email and you will have to manually insert the comment on your page. So let's see the HTML structure of the comments section.

As you can see in the code above all comments are wrapped inside a div with class post-comments. Then, all comments are wrapped inside an unordered list, and every comment presents one list item. Every comment has a div with class "comment-meta", a div with class "avatar" and a div with class "comment-body" and reply-link.

To change the avatar of the comment author first replace an image inside your img/blog/ folder, and then edit the path to it inside "img" tag in div with class "avatar". Author name and the date can be edited in div with class "comment-meta". You can simply edit this text.

To edit comment text, simply edit the text inside "p" tags inside of a div with class "comment-body". As you can see there can be more levels of comments. If you want to add a "children" comment, simply make an unordered list inside and add a class "children" to it. Then, make an list item and paste the comment structure. You can see this example on the code above.

If you'd like to change the styling of a comment go to style.css file.

After the comments section there is a form for sending a reply. You can see it's structure in the code above.

As already stated, when user leaves a comment you will receive an email message on the mail you have entered in the contact.php file. You can edit the styling of contact form in style.css file.

For comment form to work you must include js code, placed at the bottom of news-single.html file. Simply paste that code in your document.

Sidebar Customization

Sidebar is placed in "aside" tag with classes col-md-3 and aside-right/aside-left. So what we have in the sidebar? There is an unordered list with class "aside_widgets". Every widget is one list item placed in that ul and has class "widget" and class that defines widget type.

categories widget

First is a category widget which is a simple unordered list, where every list item is one news category. If you want categories to work, you must make page that will hold all posts from one category and then place path to that page inside "a" tags in list item that presents that category in category list.

latest blog posts widget

Latest blog posts widget is also an unordered list, where every list item is one blog post. Those posts have an calendar icon. For icon we used font awesome icon font, so if you'd like to change it, you can use any other icon from font icons. When you make your post single page, simply edit the path to that page inside "a" tags in list item that presents that post.

simple text widget

As you can see last widget we have in sidebar is the simple text widget. It has image, text and link. You can use as many of these type of widgets you like in your sidebar. Also note that any widget you use in the sidebar acn also be used in the footer and vice versa.

So first thing we have on this page is a Google map with multiple locations on it. After that there are some simple lists with icons, which we believe doesn't need specific explanations. So let's hold on that map.

So, as we saif this is a Google map. As you know on every inner page we have a page title. So we will have the same here, but instead of real title we will have a map inside. Then we'll have a container-fluid as we want it to be full width. Inside of that container, we'll have a row and an empty div with id "map". This id is used for adjusting and calling google maps, as for the styling too. So keep it the same. Then, let's go at the bottom of the page inside script tags where you define your map and locations. Please open locations.html file for easier understanding.

So first and the most important part we have is variable "locations". Inside of it, as you can see we have array of locations with it's latitude and longitude values. So here you can isert your locations with your coordinates. Next variable style is used for styling the color of the map. After that we have variable map and some options inside. First option is "center:". Here you define where will be the center of the map displayed. Here you need to insert latitude and longitude. After that you can adjust other options of the map.

Contact Page Customization

As youz can see we have two contact pages - contact simple and with locations map. As we already explained how to work with multiple locations map, we'll stick to contact simple layout. So there we have a contact form. Please go to section PHP code explanation to see how to customize a form, add more inputs and so; and we have a simple map in col-md-6. This map is much more simple. It is also a div with id "map" placed inside a column. You can place a map in any column size you like. The code for calling the map is placed at the bottom of the file inside script tags. So what is different here? We have a variable with one location instead of multiple locations. As you can see in contact-simple.html file that variable is called nottingham adn there you should insert latitude and longitude of your locations. You can also change map options as previously described.

API Usage

APIs used in this template are:

• Google Maps

Footer Customization

The footer is placed inside footer-wrapper that has full width. It can be dark or light. Light example can be seen on index09.html page. Inside there is footer containing columns and copyright container. Copyright container holds copyright information.

Footer has four columns in it - four footer-widgets. Every footer widget must be placed inside ul with class footer-widget-container and class of a grid you are using. Then you can have more that one widget in one column. You can see example of these widgets on any of your pages. You can also put the widgets from sidebar in the footer and vice versa.

Important to note is newsletter subscribe form. It is fully functional form and when user enters his e-mail, you'll get an email with that content. You only need to insert your email in contact.php file. Also for social icons er used font awesome icons, so you can use any social icon availabel in that package.